<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>{{msg}}</h2>
		</div>
	</body>
	<script>
		const vm = new Vue({
			// 如果el属性不存在，可以通过外部的vm.$mounted 进行挂载
			el:'#root',
			
			//如果template属性存在就替换掉#root整个内容，不存在就将#root作为整个内容
			// template:''
			data(){
				return {
					msg:'hello'
				}
			},
			methods:{
				
			},
			beforeCreate(){
				// 此时的_data还未生成
				console.log('beforeCreate',this._data)
			},
			created(){
				//此时的_data的数据代理已生成,但页面还未生成虚拟DOM
				console.log('created',this._data)
				console.log('created',this.msg)
				console.log('created',this.$el)
			},
			beforeMount(){
				// 此时会生成虚拟DOM，但页面仍未被挂载真实DOM
				console.log('beforeMount 虚拟DOM内容',this.$el)
				// 如何验证，因为真实DOM未生成，因此此时只能修改虚拟DOM的内容
				document.getElementById('root').innerText = '被修改的DOM内容'
			},
			mounted(){
				//页面挂载真实DOM
				console.log('mounted',this.$el)
				// 因为真实DOM已生成，此时修改的内容为真实的DOM内容
				// document.getElementById('root').innerText = '被修改的DOM内容'
			}
		})
	</script>
</html>